<template>
    <view>
        <!-- 瀑布流 -->
        <view v-if="data.useWaterfall" class="u-flex u-col-top">
            <view class="u-flex-1 left" :style="{ marginRight: data.marginRight }">
                <view
                    v-for="(item, i) in list"
                    :key="`good_item_left_${item.id}`"
                    :style="{
                        borderRadius: data.borderRadius,
                        marginBottom: (i + 1) % 2 !== 0 ? data.marginBottom : ''
                    }"
                >
                    <ColumnItem :data="item" :config="config" v-if="(i + 1) % 2 !== 0"></ColumnItem>
                </view>
            </view>
            <view class="u-flex-1 right">
                <view
                    v-for="(item, i) in list"
                    :key="`good_item_right_${item.id}`"
                    :style="{
                        borderRadius: data.borderRadius,
                        marginBottom: (i + 1) % 2 === 0 ? data.marginBottom : ''
                    }"
                >
                    <ColumnItem :data="item" :config="config" v-if="(i + 1) % 2 === 0"></ColumnItem>
                </view>
            </view>
        </view>
        <!-- 对齐 -->
        <view v-else class="u-flex u-flex-wrap u-col-top">
            <view
                v-for="(item, i) in list"
                class="align-items"
                :key="`good_item__${item.id}`"
                :style="{
                    backgroundColor: data.backgroundColor,
                    borderRadius: data.borderRadius,
                    marginRight: data.marginRight,
                    marginBottom: data.marginBottom,
                    width: `calc( (100vw - ${data.marginRight}) / 2)`
                }"
            >
                <ColumnItem :data="item" :config="config"></ColumnItem>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import ColumnItem from '../column.vue'
import { reactive } from 'vue'
interface Props {
    list: Array<any>
    config: any
}
const props = withDefaults(defineProps<Props>(), {
    list: () => [],
    config: () => ({})
})

const data = reactive<any>({})

for (let key in props.config) {
    data[key] = props.config[key]
}
</script>

<style lang="scss" scoped>
.align-items {
    align-self: stretch;
}
.align-items:nth-child(even) {
    margin-right: 0 !important;
}
.left:nth-last-child,
.right:nth-last-child{
    margin-bottom: 20rpx;
}
</style>
